<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #file {
        position: fixed;
        bottom: 0;
        right: 0;
      }
    </style>
  </head>
  <body>
    <div class="content"><pe-text>文字</pe-text><pe-text>文字</pe-text><pe-text>文字</pe-text></div>
    <pe-area></pe-area>
    <script>
      const t = document.querySelector('pe-text')
      const t1 = t.nextElementSibling
      const t2 = t1.nextElementSibling
      const d = document.querySelector('pe-demo')
    </script>
    <input type="file" id="file" />
    <script>
      const f = document.querySelector('#file')
      f.addEventListener('change', function () {
        const file = this.files[0]
        if (file) {
          read(file, 'base64').then((data) => download({ data }))
        }
      })
      /**
       * @param {File|Blob} file 二进制对象（File类型 或 Blob类型）
       * @param {String} type 以怎样的方式读取
       * @param {String} encoding 传入一个字符串类型的编码类型，如缺省，则默认为“utf-8”类型
       * @return {Promise<String | ArrayBuffer>}
       */
      function read(file, type, encoding = 'utf-8') {
        return new Promise((resolve, reject) => {
          const reader = new FileReader()
          // 返回错误信息
          reader.addEventListener('error', function () {
            reject(new Error('FileReader 读取资源失败'))
          })
          // 读取成功，返回读取到的资源
          reader.addEventListener('load', function () {
            resolve(reader.result)
          })
          // 不同的读取方式
          switch (type) {
            case 'text':
              reader.readAsText(file, encoding)
              break
            case 'base64':
              reader.readAsDataURL(file)
              break
            // case 'buffer':
            default:
              reader.readAsArrayBuffer(file)
              break
          }
        })
      }
      /**
       * 将缓存中的数据下载到本地
       * @param {Object|Array} data：变量名（数据）
       * @param {String|null} name：下载到本地时的文件名
       * @param {Boolean} compress：是否压缩数据
       */
      function download({ data, name, compress }) {
        if (!data) {
          throw new Error('请定义数据源')
        }
        if (typeof data === 'object') {
          data = compress ? JSON.stringify(data) : JSON.stringify(data, undefined, 2)
        }
        let blob = new Blob([data], { type: 'application/json' })

        let a = document.createElement('a')
        a.download = name || 'data.json'
        a.href = URL.createObjectURL(blob)

        a.click()
      }
    </script>
    <span class="iconfont icon-bold"></span>
  </body>
</html>
